<template>
  <div class="home">
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <van-tabbar @change="changeTab" v-model="active">
        <!-- <van-tabbar-item name="dispatch" icon="logistics">配送到家</van-tabbar-item>
        <van-tabbar-item name="classify" icon="shop-o">分类</van-tabbar-item>
        <van-tabbar-item name="cart" icon="shopping-cart" badge="5">购物车</van-tabbar-item>
        <van-tabbar-item name="mine" icon="manager-o">我的</van-tabbar-item> -->
        <van-tabbar-item v-for="(item,index) in list" :name="item.path" :icon="item.icon" :badge="item.flag && allCount>0?allCount:''" :key = index>{{item.title}}</van-tabbar-item>
      </van-tabbar>
    </footer>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: "Home",
  data(){
    return {
      active:this.$route.path.split('/')[2],
      list:[
        {
        path:"dispatch",
        title:"配送到家",
        icon:"logistics"
        },
        {
        path:"classify",
        title:"分类",
        icon:"shop-o",
        flag:false
        },
        {
        path:"car",
        title:"购物车",
        icon:"shopping-cart",
        flag:true
        },
        {
        path:"mine",
        title:"我的",
        icon:"manager-o"
        },
      ]
    }
  },
  computed:{
    // 商品购物车上标显示
    ...mapGetters({
      allCount:'Car/allCount'
    })
  },
  created(){
    console.log(this.$route.path.split('/')[2])
  },
  methods:{
    changeTab(active){
    this.$router.push('/home/'+active)
    }
  }
};
</script>
